<template>
    <el-form ref="loginForm" class="login-box" :model="loginForm" :rules="rules">
        <img src="../assets/logo.png">
        <h3 class="login-title">欢迎登录</h3>
        <el-form-item label="用户名" prop="username">
            <el-input type="text" placeholder="请输入用户名" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
            <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    export default {
        name: "Login",
        data(){
            return {
                loginForm:{
                    username:'',
                    password:''
                },
                rules:{
                    username: [
                        { required: true, message: '请输入用户名称', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password: [
                        {
                            required: true,
                            message: '请输入密码',
                            trigger: 'blur'
                        },
                    ]
                }
            }
        },
        methods:{
            submitForm(loginForm) {
                this.$refs[loginForm].validate((valid) => {
                    if (valid) {
                        // 登录成功后的跳转
                        sessionStorage.setItem('isLogin', true);
                        this.$store.dispatch("asynUpdateUser", {name:this.loginForm.username});
                        this.$router.push({name:'Main', params:{name:this.loginForm.username}})
                    } else {
                        this.$message({
                            message: '请输入用户名和密码',
                            type: 'warning'
                        });
                    }
                });
            },
            resetForm(loginForm) {
                this.$refs[loginForm].resetFields();
            }
        }
    }
</script>

<style scoped>
    .login-box{
        width: 350px;
        margin: 150px auto;
        border: 1px solid #DCDFE6;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 0 2px #DCDFE6;
    }
    .login-title{
        text-align: center;
    }
</style>